<!DOCTYPE>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>loading动画</title>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<link href="css/animation.css" rel="stylesheet" type="text/css">
<body>
<!-- 代码 开始 -->
<main class="loaded">
<h2 class="title">动画demo示例</h2>
<div class="loaders">
  <div class="loader">
    <div class="loader-inner ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-pulse</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-grid-pulse">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-grid-pulse</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate">
      <div></div>
    </div>
    <p class="name">ball-clip-rotate</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate-pulse">
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-clip-rotate-pulse</p>
  </div>
  <div class="loader">
    <div class="loader-inner square-spin">
      <div></div>
    </div>
    <p class="name">square-spin</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-clip-rotate-multiple">
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-clip-rotate-multiple</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-pulse-rise">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-pulse-rise</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-triangle-path">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-triangle-path</p>
  </div>
  <div class="loader">
    <div class="loader-inner line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">line-scale</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-scale-multiple">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-scale-multiple</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-pulse-sync">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-pulse-sync</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-beat">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-beat</p>
  </div>
  <div class="loader">
    <div class="loader-inner ball-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">ball-spin-fade-loader</p>
  </div>
  <div class="loader">
    <div class="loader-inner line-spin-fade-loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">line-spin-fade-loader</p>
  </div>
  <div class="loader">
    <div class="loader-inner triangle-skew-spin">
      <div></div>
    </div>
    <p class="name">triangle-skew-spin</p>
  </div>
  <div class="loader">
    <div class="loader-inner pacman">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p class="name">pacman</p>
  </div>
  <div class="loader">
    <div class="loader-inner semi-circle-spin">
      <div></div>
    </div>
    <p class="name">semi-circle-spin</p>
  </div>
</div>
</main>
<!-- 代码 结束 -->
</body></html>